<template>
    <h2>子级组件</h2>
    <h3>msg:{{msg}}</h3>
    <h3>mag1:{{msg1}}</h3>
    <button @click="handleChild">emitXXX</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent ({
    name: 'Child',
    props: ['msg', 'msg1'],
    /**
     * setup细节问题：
     * setup是在beforeCreate生命周期回调之前就执行了，而且就执行一次
     * setup在执行时，当前组件还没有创建出来，也就意味着，组件实例对象this根本就不能用
     * this是undefined，不能通过this调用data/conputed/methods/props中的内容
     * 所有的Compsition API的回调函数都不能调用
     * setup中的返回值是一个对象，内部的属性和方法是给html模板使用的
     * setup中的对象内部的属性和data函数中renturn对象的属性都可以在html中使用
     * setup中的对象中的属性和data函数中的对象中的属性会合并为组件对象的属性
     * setup中的对象中的方法和methods对象中的方法会合并为组件对象的方法
     * 在vue中尽量不要混合的使用data和setup及methods和setup
     * setup不能是aynsc函数，synsc返回的是一个promise，模板看不到return对象中的属性数据
    */
    // beforeCreate 数据初始化的声明周期回调
    // beforeCreate() {
    //     console.log('beforeCreate 执行了')
    // },
    // 界面渲染完毕
    // mounted() {},
    // setup(props, context) {
        setup(props, {attrs, slots, emit}){
        // props 参数，是一个对象，里面有父级组件向子级组件传递的数据，并且是子级组件中使用props接收到的所有属性
        // context 参数，对象，里面有attrs(获取当前组件标签上所有的属性的对象（相当于this.$attrs），但是该属性是在props中没有声明接收的所有对象)，emit方法（分发事件的），slots对象（插槽）
        // console.log('props:', props.msg)
        // console.log('context', context.attrs)
        // console.log('context', context.emit)
        // console.log('context', context.attrs.msg2)
        // console.log('setup 执行了')
        const showMsg1 = () => {
            console.log('setup-----showMsg1()')
        }
        // 按钮的点击事件的回调函数
        function handleChild() {
            // context.emit('changeToParent', ',and you?')
            emit('changeToParent', ',and you?')
        }
        return {
            // setup中一般都是返回一个对象，对象中的属性和方法都可以在html模板中直接使用
            showMsg1,
            handleChild
        }
    },
    // data() {
    //     return {
    //         count:10
    //     }
    // },
    // // 界面渲染后的声明周期回调
    // mounted() {
    //     console.log(this)
    // },
    // // 方法
    // methods: {
    //     showMsg2() {
    //         console.log('methods----showMsg2()')
    //     }
    // }
})
</script>

<style>

</style>